//main
import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Provider } from "react-redux";
//data
import Context from "./Context";
import store from "./store/store";
//styles
import theme from "./GlobalTheme";
import "./App.css";
//funcs
import NavBar from "./Components/Navbar/Navbar";
import ChatSpace from "./Components/ChatSpace/ChatSpace";
import Account from "./Components/Account/Account";
import Websocket from "./Components/Websocket/Websocket";

const pages = {
  root: "/",
  chat: "/chat",
  account: "/account",
};

export default function App() {
  const [WSConnectStatus, setWSConnectStatus] = useState(false);
  const [currentChat, setCurrentChat] = useState("");
  const [onlineList, setOnlineList] = useState("");
  var app = (
    <Provider store={store}>
      <Context.Provider
        value={{
          theme,
          currentChat,
          setCurrentChat,
          onlineList,
          setOnlineList,
          WSConnectStatus,
          setWSConnectStatus,
          pages,
        }}
      >
        <Router>
          <div className="App">
            <Websocket />
            <NavBar />
            <Switch>
              <Route path={pages.account}>
                <Account />
              </Route>
              <Route path={pages.chat}>
                <ChatSpace />
              </Route>
              <Route path={pages.root}></Route>
            </Switch>
          </div>
        </Router>
      </Context.Provider>
    </Provider>
  );

  return app;
}
